過去的 12 天裡，我們用 HTML 刻出了骨架、用 CSS 幫它上妝、排版、甚至做好了 RWD 與定位。此時的網頁已經長得非常漂亮了——但它依然是個「沒有靈魂的木頭人」。

點擊按鈕不會有反應、輸入框不會驗證、彈跳視窗也不會彈出來。

今天，我們終於要正式迎來前端的三大天王之三：JavaScript（JS）！對於過去寫慣設計軟體的我們來說，剛看到程式碼裡一堆 let、const 難免會有點頭暈。別擔心，我們用設計師的直覺來重新認識它！

什麼是變數（Variable）？就像 Figma 裡的「尺寸與顏色樣式（Variables / Tokens）」

在寫程式時，我們常常需要把一些資料（例如使用者的分數、商品價格、開關狀態）暫時存放在一個地方，這個容器就叫做變數。
這跟現代 UI 設計裡很紅的 Design Tokens（設計變數 / 樣式管理） 概念簡直一模一樣：

• 在 Figma 裡，你可能會定義一個變數叫做 primary-color，把數值設為 #ff6b6b。當全站要換色時，只要改這個變數就好。
• 在 JavaScript 裡，我們也是這樣宣告一個變數來裝東西：

// 宣告一個常數（不會變的資料）放網站標題
const siteTitle = "孫小豬的前端打怪日常";

// 宣告一個可以改變的變數放使用者分數
let userScore = 0;

在 JS 裡宣告變數最常使用 const（固定不變）和 let（可以隨時修改），已經很少人在用老舊的 var 囉！

JS 的基本資料型態：程式肚子裡裝了什麼？

變數這個盒子裡可以裝各種不同型態的東西，最常見的有這三種：

1. 字串（String）：

• 就是文字，必須用單引號 ' 或雙引號 " 包起來。
• 例如：let userName = "孫小豬";

2. 數字（Number）：

• 就是純數字，不用加引號，可以直接拿來做加減乘除。
• 例如：let itemCount = 5; 或 let price = 299.9;

3. 布林值（Boolean）：

• 只有兩種答案：true（對/真） 或 false（錯/假）。
• 例如：let isLogin = true;（使用者是否登入？是）。這在後面要做「如果使用者登入了就顯示頭像，沒登入就顯示登入按鈕」時超級常派上用場！

今日小結

今天我們跨出了 JavaScript 的第一步，把變數比喻成 Figma 的 Design Tokens，並認識了字串、數字、布林值這三種最基本的資料型態。

雖然 JS 開始有了一點點邏輯運算的味道，但別怕！明天我們要繼續介紹「條件判斷（if-else）」，看看網頁怎麼學會自己「看情況做決定」！